/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Popover } from 'antd';
import { Employee } from '@/pages/Organization/OrgFlow/components'; // 姓名hover弹窗
import styles from './index.module.less';

export default function Brief({ data }) {
    const { title = '', tags = [], descriptions = [], captions = [] } = data;
    const { originalData } = data;

    const renderName = item => {
        if (item.showNamePopOver && originalData[item.employeeCodeKey]) {
            // hover 姓名需要出现悬浮窗的状态使用
            const employee = {
                employeeCode: originalData[item.employeeCodeKey],
                organizationCode: originalData[item.orgCodeKey] // 对应员工所处机构
            };
            return (
                <Popover
                    content={
                        <Employee
                            employeeCode={employee.employeeCode}
                            organizationCode={employee.organizationCode}
                            organizationType={1}
                            onClick={e => {
                                e.stopPropagation();
                            }}
                        />
                    }
                    placement="bottomLeft"
                    getPopupContainer={() => document.querySelector('.ant-tabs-tabpane-active .ant-card-body')}
                >
                    <span className={styles.captionsItemValue}>{item.value}</span>
                </Popover>
            );
        }
        return (
            <span className={item?.noHover ? styles.captionsItemValueNoHover : styles.captionsItemValue}>
                {item.value}
            </span>
        );
    };

    return (
        <div className={styles.wrap}>
            <div className={styles.header}>
                <div className={styles.title}>{title}</div>
                <div className={styles.tags}>{tags}</div>
            </div>
            <div className={styles.descriptions}>
                {descriptions.map((item, index) => (
                    <React.Fragment key={`desc-${index}`}>
                        <div>{item}</div>
                        {index !== descriptions.length - 1 && <span style={{ padding: '0 4px' }}>|</span>}
                    </React.Fragment>
                ))}
            </div>
            <div className={styles.captions}>
                {captions.map(item => (
                    <div className={styles.captionsItem} key={item.label}>
                        <span className={styles.captionsItemLabel}>{item.label}</span>：{renderName(item)}
                    </div>
                ))}
            </div>
        </div>
    );
}
